<template>
    <div>
        <el-card class="box-card">
            <!--查询区域-->
            <el-form :inline="true" :model="menuFormData" :rules="menuFormRul" ref="menuFormRef" label-width="100px"
                     class="demo-ruleForm" @submit.native.prevent>
                <el-form-item label="菜单名称：" prop="name">
<!--                    @keyup.enter.native.prevent="searchMenu"-->
                    <el-input v-model="menuFormData.name"></el-input>
                </el-form-item>
                <!--查询、重置按钮-->
                <!--查询和添加按钮区域-->
                <el-form-item>
                    <el-button
                            type="primary"
                            size="mini"
                            @click="searchMenu"
                    ><i class="el-icon-search"></i> 查询
                    </el-button>
                    <el-button
                            type="success"
                            size="mini"
                            icon="el-icon-refresh-right"
                            @click="formReset"
                    >重置
                    </el-button>
                    <el-button type="primary" size="mini" @click="addButton">
                        <i class="el-icon-circle-plus-outline"></i>添加
                    </el-button>
                </el-form-item>
            </el-form>
            <!--数据表格-->
            <template>
                <el-table
                        :data="tableData"
                        style="width: 100%;margin-bottom: 20px;"
                        row-key="id"
                        border
                        :lazy="false"
                        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
                    <el-table-column
                            label="序号"
                            type="index"
                            :index="indexMethod"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="菜单名称"
                            sortable
                            width="200">
                    </el-table-column>
                    <el-table-column
                            prop="path"
                            label="路由地址"
                            sortable
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="component"
                            label="接口地址"
                            sortable
                            width="180">
                    </el-table-column>
                    <el-table-column
                            prop="type"
                            label="类型">
                        <template slot-scope="scope">
                            <el-tag v-if="scope.row.type==1" type="danger">目录</el-tag>
                            <el-tag v-if="scope.row.type==2" type="success">菜单</el-tag>
                            <el-tag v-if="scope.row.type==3" type="info">按钮</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="操作">
                        <template slot-scope="scope">
                            <el-button
                                    size="mini"
                                    @click="editMenuFormButton(scope.row)">修改
                            </el-button>
                            <el-button
                                    size="mini"
                                    type="danger"
                                    @click="delMenu(scope.row)"
                            >删除
                            </el-button>
                            <el-button type="primary" size="mini" @click="addButton">
                                <i class="el-icon-circle-plus-outline"></i>添加
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

            </template>
        </el-card>
        <!--新增弹出层-->
        <el-dialog
                title="添加"
                :visible.sync="addDialogVisible"
                width="30%"
                @closed="addCloseAddDialog">
            <!-- :model 双向绑定 -->
            <el-form label-width="100px" :model="addMenuForm" :rules="addMenuFormRul" class="demo-ruleForm"
                     ref="addMenuFormRef">
                <el-form-item label="类型：" prop="type">
                    <el-radio-group v-model="addMenuForm.type">
                        <el-radio :label="1">目录</el-radio>
                        <el-radio :label="2">菜单</el-radio>
                        <el-radio :label="3">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单名称：" prop="name">
                    <el-input v-model="addMenuForm.name"></el-input>
                </el-form-item>
                <el-form-item label="路由地址：" prop="type" v-if="addMenuForm.type!=3">
                    <el-input v-model="addMenuForm.type" placeholder="/hong/list"></el-input>
                </el-form-item>
                <el-form-item label="接口地址：" prop="component" v-if="addMenuForm.type==2||addMenuForm.type==3">
                    <el-input v-model="addMenuForm.component" placeholder="/hong/list"></el-input>
                </el-form-item>
                <el-form-item label="备注：" prop="path">
                    <textarea v-model="addMenuForm.path" style="width: 100%"></textarea>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="addDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addMenu">确 定</el-button>
            </span>
        </el-dialog>

        <!--编辑弹出框-->
        <el-dialog
                title="信息修改"
                :visible.sync="editMenuDialogVisible"
                width="30%"
                @close="editMenuCloseDialog">
            <el-form :model="editMenuData" :rules="editMenuRul" ref="editMenuRef"
                     label-width="100px" class="demo-ruleForm">
                <el-form-item label="类型：" prop="type">
                    <el-radio-group v-model="editMenuData.type">
                        <el-radio :label="1">目录</el-radio>
                        <el-radio :label="2">菜单</el-radio>
                        <el-radio :label="3">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单名称：" prop="menuName">
                    <el-input v-model="editMenuData.name"></el-input>
                </el-form-item>
                <el-form-item label="路由地址：" prop="menuUrl" v-if="editMenuData.type!=3">
                    <el-input v-model="editMenuData.path" placeholder="/hong/list"></el-input>
                </el-form-item>
                <el-form-item label="接口地址：" prop="apiUrl" v-if="editMenuData.type==2||editMenuData.type==3">
                    <el-input v-model="editMenuData.component" placeholder="/hong/list"></el-input>
                </el-form-item>
                <!--<el-form-item label="备注：" prop="remark">
                    &lt;!&ndash;<el-input v-model="editMenuData.price"></el-input>&ndash;&gt;
                    <textarea v-model="editMenuData.remark" style="width: 100%"></textarea>
                </el-form-item>-->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="editMenuDialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="commitMenu">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
        name: "menus",
        created() {
            this.initMenu();
        },
        //数据区域：主要用来定义数据，方便调用
        data() {
            return {
                ids: [],
                isActive: false,
                //编辑菜单数据对象
                editMenuData: {},
                //编辑菜单的规则
                editMenuRul: {},
                //编辑菜单弹出层
                editMenuDialogVisible: false,
                //新增菜单表单规则
                addMenuFormRul: {
                    name: [
                        {required: true, message: "请输入菜单名称", trigger: "blur"},
                        {min: 1, message: "请输入菜单名称", trigger: "blur"},
                    ],
                    menuUrl: [
                        {required: true, message: "请输入路由地址", trigger: "blur"},
                        {min: 1, message: "请输入争取的路由地址，例：'/base/module", trigger: "blur"},
                    ]
                },
                //新增菜单表单对象
                addMenuForm: {
                    name: '',
                    path: '',
                    component: '',
                    type: '',
                },
                //新增弹出层
                addDialogVisible: false,
                meNus: [],
                //总条数
                total: 0,
                //页面数据条数
                pageSize: 10,
                //当前页
                currentPage: 1,
                //数据表格对象
                tableData: [],
                //菜单表单规则
                menuFormRul: {},
                //菜单表单对象
                menuFormData: {
                    menuName: ''
                },
            }
        },
        //方法区域
        methods: {
            //删除
            delMenu(row) {
                var that = this
                this.ids = [];
                this.getIds(row)
                console.log(this.ids)
                this.$http.post(`/system/Permission/deleteMenu`, {ids: this.ids}).then(function (response) {
                    //重载数据内容
                    that.initMenu()
                    //成功提示
                    that.$message.success(response.data.msg)
                    // console.log(response)
                })
            },
            //获取id
            getIds(row) {
                this.ids.push(row.id)
                if (row.children.length > 0) {
                    for (let i = 0; i < row.children.length; i++) {
                        //递归调用
                        this.getIds(row.children[i]);
                    }
                }
            },
            //编辑菜单表单按钮
            editMenuFormButton(row) {
                //打开编辑弹出层
                this.editMenuDialogVisible = true;
                this.editMenuData = row;
            },
            //提交编辑菜单
            commitMenu() {
                var that = this
                this.$http.post(`/system/Permission/updateMenu`, this.editMenuData).then(function (response) {
                    console.log(response)
                    that.editMenuDialogVisible=false;
                })
            },
            //关闭编辑菜单的回调
            editMenuCloseDialog() {
                this.$refs.editMenuRef.resetFields()
            },
            //提交新增
            addMenu() {
                var that = this;
                this.$http.post(`/system/Permission/addMenu`, this.addMenuForm).then(function (response) {
                    console.log(response)
                   that.addDialogVisible=false;

                })
            },
            //关闭前的回调
            addCloseAddDialog() {
                this.$refs.addMenuFormRef.resetFields();
            },
            //新增按钮
            addButton() {
                //打开新增弹出层
                this.addDialogVisible = true;
            },
            //搜索菜单
            searchMenu() {
                //重载
                this.initMenu();
            },
            //菜单
            initMenu() {
                var that = this
                this.$http.post(`/system/Permission/selectalltype`, this.menuFormData).then(function (response) {
                    console.log(response)
                    that.total = response.data.result.total
                    that.tableData = response.data.result
                })
            },
            //表单重置
            formReset() {
                this.$refs.menuFormRef.resetFields();
                this.initMenu()
            },
            //当前页数据条数的改变
            handleSizeChange(val) {
                this.pageSize = val
                /*重载数据表格*/
                this.initMenu();
            },
            handleCurrentChange(val) {
                this.currentPage = val
                /*重载数据表格*/
                this.initMenu();
            },
            //序号
            indexMethod(index) {
                return index++;
            }
        }
    }
</script>

<style scoped>

</style>